<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        @font-face {
            font-family: 'iconfont';
            src: url('font/iconfont.eot');
            src: url('font/iconfont.eot?#iefix') format('embedded-opentype'), url('font/iconfont.woff2') format('woff2'), url('font/iconfont.woff') format('woff'), url('font/iconfont.ttf') format('truetype'), url('font/iconfont.svg#iconfont') format('svg');
        }
        
        * {
            margin: 0;
            padding: 0;
        }
        
        ul {
            display: none
        }
        
        li {
            height: 25px;
            list-style: none;
            text-align: center;
            line-height: 25px;
            box-sizing: border-box;
            font-size: 12px;
            padding-right: 29px;
            border-bottom: 1px solid #FF8400;
            border-right: 1px solid #FF8400;
        }
        
        #box {
            width: 70px;
            height: 45px;
            background-color: #FCFCFC;
            text-align: center;
            line-height: 45px;
            cursor: pointer;
            margin: 0 auto;
            font-size: 14px;
        }
        
        #box:hover {
            color: #FF8400;
        }
        
        .iconfont {
            font-family: "iconfont" !important;
            font-size: 16px;
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
        
        span {
            padding-left: 5px;
        }
    </style>
</head>

<body>
    <div id="box">微博<span class="iconfont">&#xe668;</span>
        <ul class="phones">
            <li>私信</li>
            <li>评论</li>
            <li>@我</li>
        </ul>
    </div>
    <script>
        var btn = document.querySelector('#box')
        var pho = document.querySelector('.phones')
        var down = document.querySelector('.down')
        var lis = document.querySelectorAll('li');
        btn.onmouseover = function() {
            pho.style.display = 'block'

        }
        btn.onmouseout = function() {
            pho.style.display = 'none'
        }
        for (var i = 0; i < lis.length; i++) {
            lis[i].onmouseover = function() {
                this.style.color = '#ff8400';
                this.style.backgroundColor = '#fff5da';
            }
            lis[i].onmouseout = function() {
                this.style.color = '#4c4c4c';
                this.style.backgroundColor = '';
            }
        }
    </script>
</body>

</html>